<template>
  <el-dialog
    :title="pre ? pre + '产品' : '添加' + '产品'"
    class="addproduct"
    :visible.sync="dialogVisible"
  >
    <span style="display: flex">
      <el-upload
        class="upload-demo"
        drag
        action=""
        :http-request="uploadSuccess"
        multiple
      >
        <i class="el-icon-upload" style="margin-top: 100px"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <div class="product-detail">
        <ul>
          <li>
            <span>分 类:</span>
            <el-select
              v-model="value"
              style="width: 100%"
              clearable
              placeholder="选择分类"
              @change="change"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.typeName"
                :value="item.typeCode"
              >
              </el-option>
            </el-select>
          </li>
          <li>
            <span>名 称:</span>
            <el-input @input="names" :value="name" placeholder="请输入名称" />
          </li>
          <li>
            <span>原产地:</span>
            <el-input
              @input="placeOrigins"
              :value="placeOrigin"
              placeholder="请输入原产地"
            />
          </li>
          <li>
            <span>尺寸:</span>
            <span
              style="width: 100%;display: flex;justify-content: center;align-items: center"
            >
              <span>宽: </span
              ><el-input
                @input="widths"
                :value="width"
                placeholder="请输入宽度"
              />
              <span>高: </span
              ><el-input
                @input="heights"
                :value="height"
                placeholder="请输入高度"
              />
            </span>
          </li>
          <li>
            <span>重 量:</span>
            <el-input
              @input="weights"
              :value="weight"
              placeholder="请输入重量"
            />
          </li>
          <li>
            <span>材 质:</span>
            <el-input
              @input="materials"
              :value="material"
              placeholder="请输入材质"
            />
          </li>
          <li>
            <span>品 牌:</span>
            <el-input @input="brands" :value="brand" placeholder="请输入品牌" />
          </li>
        </ul>
      </div>
    </span>
    <span
      slot="footer"
      class="dialog-footer"
      style="display: flex;align-items: center;justify-content: center;padding: 0px"
    >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitCheck(reqType)"
        >提交审核</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
/*eslint-disable*/
import { addProduct, getChangePorcelainInfo, upLoad } from "@/utils/table";

export default {
  name: "Dialog",
  data() {
    return {
      pre: "添加",
      dialogVisible: false,
      brand: "",
      material: "",
      weight: "",
      height: "",
      width: "",
      placeOrigin: "",
      name: "",
      category: "",
      selectName: "",
      value: "",
      reqType: "",
      porcelainCode: "",
      index: "",
    };
  },
  props: {
    color: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: [],
    },
  },
  methods: {
    changeVisible(data) {
      if (data === "add") {
        this.pre = "";
        this.reqType = "";
        this.porcelainCode = "";
        this.index = "";
        this.brand = "";
        this.material = "";
        this.weight = "";
        this.height = "";
        this.width = "";
        this.placeOrigin = "";
        this.name = "";
        this.dialogVisible = true;
        return;
      } else {
        this.pre = data.pre;
        this.reqType = data.type;
        this.porcelainCode = data.porcelainCode;
        this.index = data.index;
        this.brand = data.totalData.brand;
        this.material = data.totalData.material;
        this.weight = data.totalData.weight;
        this.height = data.totalData.height;
        this.width = data.totalData.width;
        this.placeOrigin = data.totalData.placeOrigin;
        this.name = data.totalData.porcelainName;
        this.dialogVisible = true;
      }
    },
    change(val) {
      this.selectName = this.options.find(
        (item) => item.typeCode == val
      ).typeName;
    },
    // 监听el input输入触发事件
    brands(val) {
      this.brand = val.trim();
    },
    materials(val) {
      this.material = val.trim();
    },
    weights(val) {
      this.weight = val.trim();
    },
    widths(val) {
      this.width = val.trim();
    },
    heights(val) {
      this.height = val.trim();
    },
    placeOrigins(val) {
      this.placeOrigin = val.trim();
    },
    names(val) {
      this.name = val.trim();
    },
    async submitCheck(type = "put") {
      let data = {
        userCode:localStorage.getItem('uname'),
        porcelainName: this.name,
        porcelainType: this.selectName,
        porcelainCode: this.porcelainCode,
        originPlace: this.placeOrigin,
        material: this.material,
        brand: this.brand,
        height: this.height,
        width: this.width,
        weight: this.weight,
      };
      if (type == "put") {
        let flag = false;
        await getChangePorcelainInfo("/updatePorcelain", data)
          .then((rawRes) => rawRes.data)
          .then((res) => {
            flag = true;
          });
        if (flag) {
          this.$emit("changeEditData", data, this.index);
        }
        this.$message({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
      } else {
        addProduct("/porcelain/addPorcelain", data)
          .then((rawRes) => rawRes.data)
          .then((res) => {
            this.$emit("addProduct", res);
          });
        this.$message({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
      }
      this.dialogVisible = false;
    },
    //参考: https://www.jianshu.com/p/e7b47d1c2065
    uploadSuccess(file) {
      upLoad("/upload", file, { id: 44 })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style scoped>
.product-detail {
  width: 100%;
}
ul {
  padding: 0;
}
li {
  list-style: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
li > span {
  width: 20%;
}
.upload-demo >>> .el-upload-dragger {
  height: 95%;
}
.upload-demo >>> .el-upload {
  height: 95%;
}
.upload-demo >>> .el-upload__tip {
  margin-top: 0px;
}
.addproduct >>> .el-dialog__body {
  padding-bottom: 0px;
}
</style>
